<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       body{
        background-image: url('1.png');
        background-repeat: no - repeat;
        background-size: cover;
       }
      .mtk{
        width: 300px;
        height: 200px;
        background-color: rgb(247, 232, 234);
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        display: none;
       }
      .a{
        width: 100px;
        height: 30px;
       }
      .b{
        width: 400px;
        height: 100px;
        background-color: pink;
       }
      .ly{
        width: 280px;
        height: 60px;
       }
      tr{
        width: 400px;
        height: 100px;
        background-color: rgb(245, 234, 234);
      }
    </style>
</head>
<body>
    <button onclick="show()" class="a">点击留言</button>
    <div class="mtk">
        <p>name:<input type="text" class="yhm"></p>
        <p>content</p>
        <p><textarea class="ly"></textarea></p>
        <button onclick="add()">确定</button>
        <button onclick="hide()">取消</button>
    </div>
    <table>
        <tbody>
        </tbody>
    </table>
</body>
</html>
<script>
    var mtk = document.querySelector('.mtk');
    var yhm = document.querySelector('.yhm');
    var ly = document.querySelector('.ly');
    var tbody = document.querySelector('tbody');
    function show() {
        mtk.style.display = 'block';
    }
    function hide() {
        mtk.style.display = 'none';
    }
    function add() {
        var tr = document.createElement('tr');
        // 调用 time() 函数获取格式化的时间
        tr.innerHTML = `
         <p><b>${yhm.value}</b></p>
         <p>${time()}</p>
        <p>${ly.value} <span><button onclick='sc(this)'>删除</button></span></p>
        
        `;
        tbody.appendChild(tr);
    }
    function sc(aaa){
        tbody.removeChild(aaa.parentNode.parentNode.parentNode)
    }
    function time() {
        var date = new Date();
        var year = date.getFullYear();
        var m = date.getMonth() + 1;
        var r = date.getDate();
        var str = '日一二三四五六';
        var week = date.getDay();
        // 返回格式化后的时间字符串
        return `${year}年${m}月${r}日 星期${str[week]} ${date.toLocaleString().split(' ')[1]}`;
    }
</script>